<template>
  <div>
    <canvas ref="canvas_sakura" id="canvas_sakura" style="width:204vh;position:absolute;display: none;"></canvas>
    <div class="top">
      <div class="topMark">
        <img src="@/assets/image/home/mark.jpg" id="mark" @mouseenter="onmouseenter" />
      </div>
      <div class="topTitle">
        <span>Cat Touch Fish&ensp;</span>
        <span>の</span>
        <span>&ensp;Blog</span>
      </div>
      <div class="topMenu">
        <div>
          <a href="/home">
            <div class="menuText">首页</div>
          </a>
        </div>
        <div v-for="menu in menuList" v-if="menu.path == null" :key="menu.id">
          <a>
            <div class="menuText" @mouseenter="onmouseenterMenu(menu.id)">{{
              menu.name }}</div>
          </a>
          <div class="menuTwo" ref="menuTwo" :id="menu.id" @mouseleave="onmouseoutMenu(menu.id)">
            <div v-for="item in menu.list">
              <a @click="toPage(item.path)">{{ item.name }}</a>
            </div>
          </div>
        </div>
        <div v-else>
          <a @click="toPage(menu.path)">
            <div class="menuText">{{ menu.name }}</div>
          </a>
        </div>
        <a>
          <img class="menuIcon" src="@/assets/image/home/ss.png" />
        </a>
        <a>
          <img class="menuIcon" src="@/assets/image/home/my.png" style="width: 6vh;margin-left: 3vh;" />
        </a>
      </div>
    </div>
    <iframe id="iframe" :src="path" frameborder="0" width="100%" style="min-height:100vh;" scrolling="auto"></iframe>
  </div>
</template>

<script>
import { Sakura, SakuraList } from './sakura.js'
import { homeMenu } from '@api/homeApi'
export default {
  data() {
    return {
      sakuraNum: 30, //页面樱花数量 (添加)
      limitTimes: -1, //樱花坠落循环次数
      limitArray: [],
      menuList: [],
      path: '/home/homePage'
    }
  },
  created() {
    this.initParams()
  },
  mounted() {
    // 初始化页面参数与对象
    this.initSakura()
    this.initSakuraList()
    // 页面开始坠落樱花
    this.startSakura()
    //菜单
    this.homeMenu()
  },
  methods: {
    //页面跳转
    toPage(path) {
      this.path = path
    },
    //图标滚动
    onmouseenter() {
      document
        .getElementById('mark')
        .setAttribute(
          'style',
          'margin-left: 90%; transform: rotate(360deg);-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);'
        )
      setTimeout(function () {
        document.getElementById('mark').setAttribute('style', 'margin-left: 0px')
      }, 3500)
    },
    onmouseenterMenu(id) {
      let obj = document.getElementsByClassName('menuTwo')
      for (let i = 0; i < obj.length; i++) {
        obj[i].setAttribute('style', 'display:none')
      }
      // this.$refs.menuTwo.style.display='none'
      document.getElementById(id).setAttribute('style', 'display:block')

      setTimeout(function () {
        document.getElementById(id).setAttribute('style', 'display:none')
      }, 1500)


    },
    onmouseoutMenu(id) {
      document
        .getElementById(id)
        .setAttribute('style', 'display:none')
    },
    //菜单
    homeMenu() {
      homeMenu().then((res) => {
        console.log(res)
        this.menuList = res.result
      })
    },
    //樱花  js
    // 初始化循环数组
    initParams() {
      for (let index = 0; index < this.sakuraNum; index++) {
        this.limitArray[index] = this.limitTimes
      }
    },
    initSakura() {
      const img = new Image()
      img.src = require('./sakura.png') //图片路径使用require才能获取
      // 绘制樱花
      const _this = this
      Sakura.prototype.draw = function (cxt) {
        cxt.save()
        const xc = (40 * this.s) / 4
        cxt.translate(this.x, this.y)
        cxt.rotate(this.r)
        cxt.drawImage(img, 0, 0, 50 * this.s, 50 * this.s) //context.drawImage(img,x,y,width,height);
        cxt.restore()
      }

      // 修改樱花位置,模拟飘落.
      Sakura.prototype.update = function () {
        this.x = this.fn.x(this.x, this.y)
        this.y = this.fn.y(this.y, this.y)
        this.r = this.fn.r(this.r)

        // 如果樱花越界, 重新调整位置
        if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) {
          // 如果樱花不做限制
          if (_this.limitArray[this.idx] == -1) {
            this.r = _this.getRandom('fnr')
            if (Math.random() > 0.4) {
              this.x = _this.getRandom('x')
              this.y = 0
              this.s = _this.getRandom('s')
              this.r = _this.getRandom('r')
            } else {
              this.x = window.innerWidth
              this.y = _this.getRandom('y')
              this.s = _this.getRandom('s')
              this.r = _this.getRandom('r')
            }
          }
          // 否则樱花有限制
          else {
            if (_this.limitArray[this.idx] > 0) {
              this.r = _this.getRandom('fnr')
              if (Math.random() > 0.4) {
                this.x = _this.getRandom('x')
                this.y = 0
                this.s = _this.getRandom('s')
                this.r = _this.getRandom('r')
              } else {
                this.x = window.innerWidth
                this.y = _this.getRandom('y')
                this.s = _this.getRandom('s')
                this.r = _this.getRandom('r')
              }
              // 该越界的樱花限制数减一
              _this.limitArray[this.idx]--
            }
          }
        }
      }
    },
    initSakuraList() {
      SakuraList.prototype.push = function (sakura) {
        this.list.push(sakura)
      }

      // list update 方法
      SakuraList.prototype.update = function () {
        for (let i = 0, len = this.list.length; i < len; i++) {
          this.list[i].update()
        }
      }

      // list draw 方法
      SakuraList.prototype.draw = function (cxt) {
        for (let i = 0, len = this.list.length; i < len; i++) {
          this.list[i].draw(cxt)
        }
      }
      SakuraList.prototype.get = function (i) {
        return this.list[i]
      }
      SakuraList.prototype.size = function () {
        return this.list.length
      }
    },
    // 位置随机策略
    getRandom(option) {
      let ret, random
      switch (option) {
        case 'x':
          ret = Math.random() * window.innerWidth
          break
        case 'y':
          ret = Math.random() * window.innerHeight
          break
        case 's':
          ret = Math.random()
          break
        case 'r':
          ret = Math.random() * 6
          break
        case 'fnx':
          random = Math.random() - 0.3
          ret = function (x, y) {
            return x + 0.5 * random - 1.7
          }
          break
        case 'fny':
          random = 5 + Math.random() * 0.7
          ret = function (x, y) {
            return y + random
          }
          break
        case 'fnr':
          random = Math.random() * 0.03
          ret = function (r) {
            return r + random
          }
          break
      }
      return ret
    },

    // 樱花入口
    startSakura() {
      const requestAnimationFrame =
        window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame
      const canvas = this.$refs.canvas_sakura
      canvas.height = window.innerHeight
      canvas.width = window.innerWidth
      const cxt = canvas.getContext('2d')
      const sakuraList = new SakuraList()
      // sakuraNum 樱花个数
      for (let i = 0; i < this.sakuraNum; i++) {
        const randomX = this.getRandom('x')
        const randomY = this.getRandom('y')
        const randomR = this.getRandom('r')
        const randomS = this.getRandom('s')
        const randomFnx = this.getRandom('fnx') //x轴移动速度
        const randomFny = this.getRandom('fny') //y轴移动速度
        const randomFnR = this.getRandom('fnr') //转动速度
        const sakura = new Sakura(
          randomX,
          randomY,
          randomS,
          randomR,
          {
            x: randomFnx,
            y: randomFny,
            r: randomFnR,
          },
          i
        )

        sakura.draw(cxt)

        sakuraList.push(sakura)
      }
      let stop = requestAnimationFrame(function f() {
        // console.log("111");
        cxt.clearRect(0, 0, canvas.width, canvas.height)
        // 修改樱花位置逻辑
        sakuraList.update()
        // 画出修改后的樱花
        sakuraList.draw(cxt)
        // 递归 修改位置, 画出修改后的樱花
        stop = requestAnimationFrame(f)
      })
    },
  },
}
</script>
<style  scoped>
.top {
  width: 95%;
  height: 75px;
  position: fixed;
  left: 2.5%;
  top: 2.5%;
  border-radius: 75px;
  background-color: rgb(0, 0, 0, 0);
  -webkit-transition: all 1s ease !important;
  transition: all 1s ease !important;
  display: flex;
}

.top:hover {
  background-color: rgb(255, 255, 255, 0.8);
}

.topMark {
  width: 11%;
  height: 70px;
  margin-left: 2%;
  margin-top: 5px;
}

#mark {
  width: 70px;
  height: 70px;
  border-radius: 40px;
  -webkit-transition: all 3s ease !important;
  transition: all 3s ease !important;
  border: 1px solid #ff8800;
}

.topTitle {
  width: 27%;
  height: 70px;
  margin-top: 5px;
  margin-left: 3%;
  font-size: 40px;
  font-weight: 700;
  font-style: italic;
  -webkit-text-stroke: 1px #ff8800;
}

.topMenu {
  width: 33%;
  height: 70px;
  margin-left: 22%;
  display: flex;
  text-align: center;
  line-height: 70px;
}

.menuIcon {
  margin-right: 1%;
  width: 3vh;
}

.menuText {
  vertical-align: middle;
  font-size: 18px;
  width: 10vh;
}

a {
  color: #ff8800;
}

.menuTwo {
  width: 5%;
  line-height: 30px;
  background-color: rgb(255 255 255);
  border-radius: 20px;
  position: absolute;
  top: 55px;
  display: none;
  -webkit-transition: all 5s ease !important;
  transition: all 5s ease !important;
}
</style>